<template>
  <div class="container">
		<div id="main"  v-show="mainVisible"  style="width:1200px;height:500px;"></div>
		<div id="main2" v-show="main2Visible" style="width:1200px;height:500px;"></div>
		<div style="position: absolute;top:0px;left:20%;">
			<button id="sector" @click="bing()">饼图</button>
			<button id="Cylindrical" @click="zhu()">柱状图</button>
		</div>
  </div>

  
</template>
<script>
import { FriLink } from '@/model/friLink'

import * as echarts from 'echarts';

export default {
  data() {
    return {
		 myChart:Object
		 ,myChart2:Object
		,heng:[]
		,zong:[]
		,bingDt:[]
		,mainVisible: true  
		,main2Visible: false  
    }
  },
  
  name: "chart",
  
  props: {

  },
  
  watch: {

  },
  mounted() {
    
  },
  
  methods: {
		// 渲染柱状图片
		box() {
				this.myChart2=Object
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				let option = {
				
				  title: {
					text: '企业岗位总数'
				  },
				  label: { //显示数字
						show: true,
						position: "top",
						textStyle: {
							color: "#666"
						}
				 },
				  xAxis: {
					type: 'category',
					data: this.heng
				  },
				  yAxis: {
					type: 'value'
				  },
				  dataZoom: [
				  {
					  show: false, // 是否显示滑动条
					  xAxisIndex: 0, // 这里是从X轴的0刻度开始
					  startValue: 0, // 数据窗口范围的起始数值
					  endValue: 10 // 数据窗口范围的结束数值(一次性展示几个)
					}
				  ],
				  series: [
					{
					  //data: [120, 200, 150, 80, 70,],
					  data: this.zong,
					  type: 'bar'
					}
				  ]
				};
				
				if (this.heng.length > 0 && this.zong.length > 0) {
				  setInterval(()=>{
					// 每次向后滚动一个，最后一个从头开始
					if (option.dataZoom[0].endValue === this.heng.length) {
					  option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
					  option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
					} else {
					  option.dataZoom[0].startValue = option.dataZoom[0].startValue + 9; // 数据窗口范围的起始数值
					  option.dataZoom[0].endValue = option.dataZoom[0].endValue + 9; // 数据窗口范围的结束数值
					}
					this.myChart.setOption(option);
				  }, 2000);
				}
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
		}
		// 饼图
		,box2() {
				this.myChart=Object
				// 基于准备好的dom，初始化echarts实例
				this.myChart2 = echarts.init(document.getElementById('main2'));
				// 指定图表的配置项和数据
				let option2 = {
				  title: {
					text: '各分类的数量占比',
					left: 'center'
				  },
				  tooltip: {
					trigger: 'item'
				  },
				  legend: {
					orient: 'vertical',
					left: 'left'
				  },
				  series: [
					{
					  name: '分类名称',
					  type: 'pie',
					  radius: '50%',
					  data: this.bingDt,
					  emphasis: {
						itemStyle: {
						  shadowBlur: 10,
						  shadowOffsetX: 0,
						  shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					  }
					}
				  ]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart2.setOption(option2);
		}
		//柱状图和折线图还有散点图的数据格式
		,async title() {
			
			//[{
			//	"id": 1,
			//	"name": "Java开发",
			//	"pos_num": 8
			//}, {
			//	"id": 2,
			//	"name": "C++开发",
			//	"pos_num": 2
			//}, {
			//	"id": 9,
			//	"name": "PHP开发",
			//	"pos_num": 1
			//}, {
			//]
			
			const pList = await FriLink.posCount()
			console.info(222)
				console.info(pList)
			console.info(222)
			for (let i = 0; i < pList.length; ++i) {
			
				this.heng.push(pList[i].name)
				this.zong.push(pList[i].pos_num)
				
				let bingO={ value: pList[i].pos_num, name: pList[i].name }
				this.bingDt.push(bingO)
		
			}
			
			
			
			
		}
		//柱状图
		,zhu() {
				//let data=this.dt
				this.tp= 'bar'
				//this.list=[]
				this.title()
				setTimeout(() => {
					 this.mainVisible=true
					 this.main2Visible=false
					 this.box()
				}, 1200)
				
		}
		//饼图
		,bing() {
		        this.title()
				console.info(777)
				console.info(this.bingDt)
				console.info(777)
				setTimeout(() => {
					this.mainVisible=false
					 this.main2Visible=true
					 this.box2()
				}, 1200)
		}
  },
}
</script>

<style lang="scss" scoped>

</style>
